<template>
  <div>
    <div>
      <div id="le">
      <el-button type="primary" icon="el-icon-plus" @click="dialogVisible=true">新增</el-button>
      <el-dialog
          title="学生管理"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
          <div>
            <el-form v-model="student">
              <el-form-item>
                <el-input v-show="false" v-model="student.sid"></el-input>
              </el-form-item>
              <el-form-item label="姓名">
                <el-input v-model="student.sname"></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <template>
                  <el-radio v-model="student.sex" :label="0" value="0">男</el-radio>
                  <el-radio v-model="student.sex" :label="1" value="1">女</el-radio>
                </template>
              </el-form-item>

              <el-form-item label="班级">
                <el-select v-model="student.rid" placeholder="请选择">
                  <el-option v-for="item in roomVo" :value="item.rid" :label="item.rname">
                  </el-option>
                </el-select>
              </el-form-item>

            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="save(student)">确定</el-button>
          </span>
        </el-dialog>
      </div>
      <el-input v-model="sname" placeholder="请输入要查找的学生姓名" style="width: 100px;margin-right: 5px"></el-input>
      <el-button type="success" @click="findAll">搜索</el-button>
    </div>

    <div>
      <el-table
          ref="filterTable"
          :data="tableData.list"
          border
          style="width: 100%">
        <el-table-column
            prop="sid"
            label="学生编号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="sname"
            label="姓名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="sex"
            label="性别"
            sortable
            width="180">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.sex==0">男</el-tag>
            <el-tag type="danger" v-if="scope.row.sex==1">女</el-tag>
          </template>
        </el-table-column>

        <el-table-column
            prop="roomVo.rname"
            label="班级"
            width="100"
            :filters="[{ text: '2306A', value: '2306A' }, { text: '2306B', value: '2306B' }, { text: '2307A', value: '2307A' }, { text: '2308A', value: '2308A' }]"
            :filter-method="filterTag"
            filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag
                disable-transitions>{{scope.row.roomVo.rname}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column
            label="操作"
            width="100">
          <template slot-scope="scope">
            <el-button type="text" @click="show(scope.row)">修改</el-button>
          </template>
        </el-table-column>

      </el-table>

      <div class="block">
        <span class="demonstration">完整功能</span>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[2,5,8]"
            :page-size="tableData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.total">
        </el-pagination>
      </div>
    </div>
  </div>

</template>

<script>

import {getRequest, postRequest} from "@/utils/api";
import {Message} from "element-ui";
import axios from "axios";

export default {
  name: "Students",
  data(){
    return{
      tableData:[],
      sname:'',
      student:{
        sid:'',
        sname:'',
        sex:'',
        rid:'',
      },
      roomVo:'',
      dialogVisible:false,
      pageSize:''
    }
  },
  methods:{

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize=val;
      this.findAll()
    },
    handleCurrentChange(val) {
      axios.get("/student/students?sname="+this.sname+"&pageSize="+this.pageSize+"&offset="+val).then(resp =>{
        this.tableData=resp.data.data;
      })
    },
    show(obj){
      this.student=obj;
      this.dialogVisible=true;
    },

    save(student){
      postRequest("/student/save",student).then(resp=>{
        if(resp){
          if(resp.data.flag){
            Message.success(resp.data.message);
            this.dialogVisible=false;
            this.student.sid=''
            this.student.sname=''
                this.student.sex=''
                this.student.rid=''
            this.findAll()
            Message.success("新增成功");
          } else{
            Message.error("新增失败");
          }
        }
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    findAll(){
     axios.get("/student/students?sname="+this.sname+"&pageSize="+this.pageSize).then(resp =>{
        this.tableData=resp.data.data;
      })
    },
    findroom(){
      getRequest("/student/room").then(resp=>{
        this.roomVo=resp.data.data;
      })
    },
    filterTag(value, row) {
      return row.roomVo.rname == value;
    },
  },
  created() {
    this.findAll();
    this.findroom();
  }
}
</script>

<style scoped>
#le{
  float: left;
}
</style>